import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

import Main from '../views/Main.vue'
import Import from '../views/main/Import.vue'
import NotFound from '@/views/NotFound.vue'

import Welcome from '../views/Welcome.vue'

import Introduce from '../views/Introduce.vue'
Vue.use(VueRouter)

// 1.创建路由组件
// 2.将路由与组件进行映射
// 3.创建router实例

const routes = [
    // 介绍
    {
        path: '/',
        name: 'introduce',
        component: Introduce,
    },
    // 登录和注册
    {
        path: '/welcome',
        name: 'welcome',
        component: Welcome,
        children: [
            {
                path: '/welcome',
                component: Welcome,
            },
        ]
    },
    // 主路由
    {
        path: '/main/',
        name: 'main',
        component: Main,
        redirect: '/main/import', // 重定向
        beforeEnter: (to, from, next) => {
            // 在根路由'/main/'进入前执行初始化操作
            store.commit('initUserData'); // 使用引入的store实例
            next();
        },
        children: [
            // 子路由
            { path: 'import', component: Import },
        ]
    },
    // 404 Not Found
    {
        path: '*',
        component: NotFound,
    }
]

const router = new VueRouter({
    mode: 'history',
    routes // (缩写) 相当于 routes: routes
})

export default router
